<template>
  <view class="home-wrapper">
    <u-swiper
      :list="list2"
      keyName="image"
      showTitle
      :autoplay="false"
      circular
    ></u-swiper>
    <view class="base-box">
      <view class="title">基础功能</view>
      <view class="box">
        <view
          class="item"
          v-for="(item, index) in list"
          @click="toPath(item)"
          :key="index"
        >
          <u-icon :name="item.name" color="#2979ff" :size="20"></u-icon>
          <text class="grid-text">{{ item.title }}</text>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "wifi",
          title: "wifi继电器",
          path: "/pages/nwifi/index",
          state: true,
        },
        {
          name: "hourglass-half-fill",
          title: "滴漏传感器",
          path: "/pages/fdrain/index",
          state: true,
        },
        {
          name: "setting-fill",
          title: "RTU配置",
          path: "/pages/rtu/index",
          state: true,
        },
        {
          name: "setting",
          title: "DTU配置",
          path: "/pages/dtu/index",
          state: true,
        },
      ],
      list2: [
        {
          image: require("../../static/ban1.jpg"),
          title: "",
        },
      ],
    };
  },
  onLoad() {
    uni.showShareMenu({
      withShareTicket: true, // 是否使用带 shareTicket 的转发
      menus: ["shareAppMessage"], // 显示“发送给朋友”和“分享到朋友圈”按钮
    });
  },
  onShareAppMessage() {
    return {
      title: "当康科技DK", // 分享标题
      path: "/pages/index/index", // 分享路径，可以是当前页面的路径或指定页面的路径
      imageUrl: "https://iot.suntar.com/wxLogin/6691e517240270b7ec6dfcd4f3c2da4.jpg", // 分享的图片URL
      success: function (res) {
        // 分享成功时的回调
        console.log("分享成功", res);
      },
      fail: function (res) {
        // 分享失败时的回调
        console.log("分享失败", res);
      },
    };
  },
  mounted() {
    this.isLocation();
  },
  methods: {
    // 判断是否启定位功能
    isLocation() {
      var _that = this;
      uni.getLocation({
        type: "wgs84",
        altitude: true,
        success: (res) => {
          // console.log("定位", res);
        },
        fail: (err) => {
          // console.log("未开启定位", err);
          if (err.errMsg.includes("require permission")) {
            uni.showModal({
              title: "授权提示",
              content: "需要获取您的地理位置附近的蓝牙设备",
              success(res) {
                if (res.confirm) {
                  uni.openSetting({
                    success(res) {
                      // 用户同意授权
                      if (res.authSetting["scope.userLocation"]) {
                        // console.log("用户已授权地理位置");
                        // 继续获取地理位置
                        _that.isLocation();
                      } else {
                        // 用户拒绝授权
                        uni.showToast({
                          title: "请在设置中开启定位",
                          duration: 2000,
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          } else {
            // console.log("未开启定位", err);
            uni.showToast({
              title: "请在设置中开启定位",
              duration: 2000,
              icon: "none",
            });
          }
        },
      });
    },

    toPath(val) {
      if (val.state) {
        uni.navigateTo({
          url: val.path,
        });
      } else {
        uni.showToast({
          title: "待开放",
          icon: "none",
          duration: 500,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home-wrapper {
  height: 100vh;
  width: 100vw;
  background-color: #f4f4f4;
  box-sizing: border-box;
  padding: 20px;
  .base-box {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    .title {
      font-size: 30rpx;
      color: #398ade;
      height: 40rpx;
      line-height: 40rpx;
      margin-bottom: 20rpx;
    }
    .box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        width: 48%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #edf2fa;
        margin-bottom: 20rpx;
        border-radius: 10rpx;
        padding: 16rpx 0;
        .grid-text {
          font-size: 14px;
          color: #606266;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>
